<div class="content-area">
  <h2>{{getTitle()}}</h2>
  <div *ngIf="!travelAv(); else av_content">
    <div *ngIf="!this.gameService.game.research.prestigeResearch.owned()">
      <clr-alert [clrAlertType]="'alert-warning'">
        <div class="alert-item">
          <span class="alert-text">
           旅行研究未完成，你无法旅行！
          </span>
        </div>
      </clr-alert>
    </div>
    <p> 您需要旅行研究： </p>
    <table class="nowrap" style="width:100%">
      <tbody>
        <tr *ngFor="let cost of gameService.game.world.toUnlock">
          <td style="width:150px;">
            <span class="nowrap">{{cost.basePrice | format}}&nbsp;{{cost.unit.name}}</span>
          </td>
          <td style="width:100%">
            <div class="progress labeled" [ngClass]="{'success': cost.unit.quantity.greaterThanOrEqualTo(cost.basePrice), 'danger': !cost.unit.quantity.greaterThanOrEqualTo(cost.basePrice)}">
              <progress max="100" [value]="cost.unit.quantity.times(100).div(cost.basePrice).toNumber()" data-displayval="0%">
              </progress>
              <span *ngIf="!cost.unit.quantity.greaterThan(cost.basePrice) ;else other_content">
                {{cost.unit.quantity.times(100).div(cost.basePrice) | format}}%
              </span>
              <ng-template #other_content>
                <span> 100% </span>
              </ng-template>

            </div>
          </td>
        </tr>
      </tbody>
    </table>
      <div *ngIf="this.gameService.game.world.toUnlockMax.length >0">
        <p>你必须拥有少于：</p>
        <table class="nowrap" style="width:100%">
          <tbody>
            <tr *ngFor="let cost of gameService.game.world.toUnlockMax">
              <td>
                <span class="nowrap">{{cost.basePrice | format}}&nbsp;{{cost.unit.name}}</span>
              </td>
              <td style="width:100%">
                <div class="progress labeled" [ngClass]="{'success': !cost.unit.quantity.greaterThanOrEqualTo(cost.basePrice), 'danger': cost.unit.quantity.greaterThanOrEqualTo(cost.basePrice)}">
                  <progress max="100" [value]="cost.unit.quantity.times(100).div(cost.basePrice).toNumber()" data-displayval="0%">
                  </progress>
                  <span *ngIf="!cost.unit.quantity.greaterThan(cost.basePrice)">
                    {{cost.unit.quantity.times(100).div(cost.basePrice) | format}}%
                  </span>
                  <span *ngIf="cost.unit.quantity.greaterThan(cost.basePrice)">
                    100%
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <button class="btn btn-warning-outline" (click)="skipWorld()">跳过</button>
      <p> 通过跳过你将能够改变世界，但你不会得到 {{gameService.game.getExperience()
        | format}} 经验。</p>
  </div>

  <ng-template #av_content>
    <div *ngIf="!gameService.game.skip; else skip_content">
      <p> 离开你将获得 {{gameService.game.getExperience() | format}} 经验。 高层次的世界将会产生更多的经验，但需要更多的资源。 </p>
    </div>
    <ng-template #skip_content>
      <div *ngIf="gameService.game.skip">
        <p>
          如果选择跳过这个世界，你将不会获得任何经验！ 如果你想改变主意，请切换到 “旅行” 之外的另一个选项卡。
        </p>
      </div>
    </ng-template>
    <div>
       旅行需要的资源:
      <span *ngFor="let cost of gameService.game.world.toUnlock">
        <span class="nowrap">{{cost.basePrice | format}}&nbsp;{{cost.unit.name}},</span>
      </span>
      <div *ngIf="this.gameService.game.world.toUnlockMax.length >0">
        并且要低于:
        <span *ngFor="let cost of gameService.game.world.toUnlockMax">
          <span class="nowrap">{{cost.basePrice | format}}&nbsp;{{cost.unit.name}},</span>
        </span>
      </div>
    </div>
    <div class="form-group">
      <a class="btn btn-success-outline" routerLink="/world-build" *ngIf="this.gameService.game.prestige.worldBuilder.buyAction.owned()">
        <clr-icon shape="network-settings"></clr-icon>
        生成
      </a>
      <button class="btn btn-secondary" (click)="change()">
        <clr-icon shape="world"></clr-icon>
        改变世界
      </button>

      <label>最小等级:</label>
      <input type="number" placeholder="0" [(ngModel)]="gameService.game.minUser" class="numIn" min="1" [max]="gameService.game.maxUser">
      <label>最大等级 ({{gameService.game.maxMax}}):</label>
      <input type="number" [placeholder]="gameService.game.maxMax" [(ngModel)]="gameService.game.maxUser" class="numIn"
        [min]="gameService.game.minUser" [max]="gameService.game.maxMax">

    </div>
    <div class="card-columns card-columns-2">

      <app-world *ngFor="let world of gameService.game.nextWorlds " [world]="world" [showKeep]="true"></app-world>

    </div>
  </ng-template>
</div>
